<template>
  <view class="course-category-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar-container">
        <text class="iconfont-v2 icon-sousuo search-icon"></text>
        <input 
          class="search-input" 
          placeholder="请输入关键字" 
          v-model="searchKeyword" 
          @confirm="handleSearch" 
        />
        <button class="search-btn" @click="handleSearch">
          <text>搜索</text>
        </button>
      </view>
    </view>

    <!-- 主分类导航 -->
    <!-- <view class="main-category-nav">
      <view class="category-tabs">
        <view 
          class="category-tab" 
          v-for="(category, index) in mainCategories" 
          :key="index"
          :class="{ active: currentMainCategory === index }"
          @click="switchMainCategory(index)"
        >
          <text>{{ category }}</text>
        </view>
      </view>
    </view> -->


    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 左侧子分类 -->
      <view class="sidebar">
        <view class="sub-categories">
          <view 
            class="sub-category-item" 
            v-for="(subCategory, index) in subCategories" 
            :key="index"
            :class="{ active: currentSubCategory === index }"
            @click="switchSubCategory(index)"
          >
            <text>{{ subCategory }}</text>
          </view>
        </view>
      </view>

      <!-- 右侧课程列表 -->
      <view class="course-list">
        <view class="filter-tabs">
          <view 
            class="filter-tab" 
            v-for="(filter, index) in filterTabs" 
            :key="index"
            :class="{ active: currentFilter === index }"
            @click="switchFilter(index)"
          >
            <text>{{ filter }}</text>
          </view>
        </view>

        <view class="course-item" v-for="(course, index) in courseList" :key="index" @click="goCourseDetail(course)">
          <view class="course-thumbnail">
            <image :src="course.thumbnail" :alt="course.title" />
            <view class="thumbnail-overlay">
              <text class="course-type">{{ course.type }}</text>
            </view>
          </view>
          <view class="course-info">
            <text class="course-title">{{ course.title }}</text>
            <text class="course-duration">课程时间: {{ course.duration }}</text>
            <view class="course-price">
              <text class="current-price">¥{{ course.currentPrice }}</text>
              <text class="original-price">¥{{ course.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      currentMainCategory: 0,
      currentFilter: 0,
      currentSubCategory: 0,
      
      // 主分类
      mainCategories: [
        "驾驶培训",
        "专升本",
        "四六级",
        "考研考公"
      ],
      
      // 筛选标签
      filterTabs: [
        "全部",
        "最新",
        "热门"
      ],
      
      // 子分类
      subCategories: [
        "专升本",
        "考研辅导",
        "专升本",
        "英语培训",
        "数学辅导",
        "物理实验",
        "化学基础"
      ],
      
      // 课程列表
      courseList: [
        {
          id: 1,
          title: "快乐学英语自信说世界",
          duration: "40分",
          currentPrice: "39.9",
          originalPrice: "45.8",
          type: "升高课程 科辅导",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 2,
          title: "快乐学英语自信说世界",
          duration: "40分",
          currentPrice: "12.8",
          originalPrice: "15.8",
          type: "零基础 全科雅思课",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 3,
          title: "快乐学英语自信说世界",
          duration: "40分",
          currentPrice: "12.8",
          originalPrice: "15.8",
          type: "!鸟英语 法研习",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 4,
          title: "数学基础强化训练",
          duration: "60分",
          currentPrice: "25.9",
          originalPrice: "35.8",
          type: "数学基础 强化训练",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 5,
          title: "物理实验操作技巧",
          duration: "45分",
          currentPrice: "18.8",
          originalPrice: "22.8",
          type: "物理实验 操作技巧",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 6,
          title: "化学方程式解析",
          duration: "50分",
          currentPrice: "21.9",
          originalPrice: "28.8",
          type: "化学基础 方程式",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        console.log("搜索课程:", this.searchKeyword);
        // 这里可以添加搜索逻辑
        uni.showToast({
          title: `搜索: ${this.searchKeyword}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: "请输入搜索关键字",
          icon: 'none'
        });
      }
    },
    switchMainCategory(index) {
      this.currentMainCategory = index;
      console.log("切换主分类:", this.mainCategories[index]);
    },
    switchFilter(index) {
      this.currentFilter = index;
      console.log("切换筛选:", this.filterTabs[index]);
    },
    switchSubCategory(index) {
      this.currentSubCategory = index;
      console.log("切换子分类:", this.subCategories[index]);
    },
    goCourseDetail(course) {
      console.log("查看课程详情:", course);
      uni.navigateTo({
        url: `/pages/fast/course-detail?id=${course.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.course-category-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.search-section {
  background: white;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .search-bar-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    gap: 20rpx;

    .search-icon {
      font-size: 32rpx;
      color: #999;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 28rpx;
      color: #333;

      &::placeholder {
        color: #999;
      }
    }

    .search-btn {
      background: #ED6567;
      color: white;
      border: none;
      border-radius: 40rpx;
      padding: 16rpx 32rpx;
      font-size: 28rpx;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #d55a54;
      }

      text {
        color: white;
      }
    }
  }
}

.main-category-nav {
  background: white;
  border-bottom: 2rpx solid #f0f0f0;

  .category-tabs {
    display: flex;
    overflow-x: auto;
    padding: 0 20rpx;

    .category-tab {
      flex-shrink: 0;
      padding: 30rpx 24rpx;
      font-size: 28rpx;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;

      &.active {
        color: #ED6567;
        font-weight: 600;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background: #ED6567;
          border-radius: 2rpx;
        }
      }
    }
  }
}

.content-area {
  display: flex;
  min-height: calc(100vh - 200rpx);

  .sidebar {
    width: 200rpx;
    background: white;
    border-right: 2rpx solid #f0f0f0;

    .sub-categories {
      .sub-category-item {
        padding: 30rpx 20rpx;
        font-size: 28rpx;
        color: #666;
        cursor: pointer;
        transition: all 0.3s ease;
        border-bottom: 2rpx solid #f0f0f0;
        text-align: center;

        &.active {
          background: #ED6567;
          color: white;
          font-weight: 600;
        }

        &:hover:not(.active) {
          background: #f8f9fa;
          color: #333;
        }
      }
    }
  }

  .course-list {
    flex: 1;
    padding: 20rpx;

    .filter-tabs {
      display: flex;
      gap: 20rpx;
      margin-bottom: 30rpx;

      .filter-tab {
        padding: 16rpx 32rpx;
        background: white;
        border-radius: 40rpx;
        font-size: 28rpx;
        color: #666;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2rpx solid #f0f0f0;

        &.active {
          background: #ED6567;
          color: white;
          border-color: #ED6567;
        }

        &:hover:not(.active) {
          border-color: #ED6567;
          color: #ED6567;
        }
      }
    }

    .course-item {
      background: white;
      border-radius: 24rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
      }

      .course-thumbnail {
        position: relative;
        width: 100%;
        height: 200rpx;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .thumbnail-overlay {
          position: absolute;
          top: 16rpx;
          left: 16rpx;
          background: rgba(0, 0, 0, 0.7);
          border-radius: 12rpx;
          padding: 8rpx 16rpx;

          .course-type {
            font-size: 24rpx;
            color: white;
          }
        }
      }

      .course-info {
        padding: 24rpx;

        .course-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 12rpx;
          display: block;
          line-height: 1.4;
        }

        .course-duration {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 16rpx;
          display: block;
        }

        .course-price {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .current-price {
            font-size: 32rpx;
            font-weight: 600;
            color: #ED6567;
          }

          .original-price {
            font-size: 26rpx;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>